import React, { useState, useEffect } from 'react';
import {
    Platform,
    StyleSheet, Text,
    TouchableOpacity,View
} from 'react-native';
import CirclePercentage from "./CirclePercentage";
import {colors, moodsColors, moodsConfig, windowWidth} from "../../utils/config";
import {useStatistics} from "../../hooks/useStatistics";

export default function PercentView(props) {

    const { statistics, statisticsMoods, eventsName, selectIndex, setSelectTypeIndex } = useStatistics();

    const setTypeIndex = (index) => {
        setSelectTypeIndex(index);
    }

    const clickUp = () => {
        props?.clickUp && props?.clickUp();
    }

    let segments = [];
    let circleData = [];

    if (selectIndex === 1) {
        circleData = statistics;
        if (statistics?.length > 0) {
            statistics.map((item,index)=>{
                if((props.showType == 2 && item?.recorded) || props.showType == 1){
                    if ((props.showType == 2 && item?.percent != 0) || (props.showType == 1 && item?.percentBaseTotalTime != 0)) {
                        segments.push({
                            percentage: props.showType == 2 ? parseInt(String((item?.percent || 0) * 100)) : parseInt(String((item?.percentBaseTotalTime || 0) * 100)),
                            color: colors[index % colors.length]
                        })
                    }
                }
                
            })
        }
    } else {
        circleData = statisticsMoods;
        if (statisticsMoods?.length > 0) {
            statisticsMoods.map((item,index)=>{
                if (item?.percent != 0) {
                    segments.push({
                        percentage: parseInt(String((item?.percent || 0) * 100)),
                        color: moodsColors[item?.type || '0']
                    })
                }
            })
        }
    }
    console.log('---statisticsMoods---',statisticsMoods,'parentData:',props.parentData,'segments:',segments, 'eventsName:',eventsName,'props?.lastEventName:',props?.lastEventName)

    const shadowStyle = Platform.select({
        ios: {
            shadowColor: 'black',
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.5,
            shadowRadius: 4,
        },
        android: {
            elevation: 5,
        },
    });

    let typeViewStyle = styles.percentItemView;
    let moodsViewStyle = styles.percentItemView;
    if (selectIndex === 1) {
        typeViewStyle = {
            ...typeViewStyle,
            backgroundColor: '#fff',
            ...shadowStyle,
        };
    } else {
        moodsViewStyle = {
            ...moodsViewStyle,
            backgroundColor: '#fff',
            ...shadowStyle,
        };
    }

    return (
        <View style = {styles.percentView}>
            {
                eventsName || props?.lastEventName?
                    <View style={styles.parentView}>
                        <Text style={styles.parentsTitle} numberOfLines={1}>{eventsName || props?.lastEventName}</Text>
                        <TouchableOpacity
                            style={styles.parentToUpView}
                            onPress={clickUp}
                        >
                            <Text style={styles.parentToUpText}>{'< 返回上一级'}</Text>
                        </TouchableOpacity>
                    </View>:null
            }
            <View style={styles.percentBottomView}>
                <View style = {styles.percentTypeView}>
                    <TouchableOpacity
                        style={typeViewStyle}
                        onPress={() => setTypeIndex(1)}
                    >
                        <Text style={[styles.circleTypeText,{fontWeight: selectIndex === 1 ? 'bold' : 'normal'}]}>分类</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={moodsViewStyle}
                        onPress={() => setTypeIndex(2)}
                    >
                        <Text style={[styles.circleTypeText,{fontWeight: selectIndex === 2 ? 'bold' : 'normal'}]}>效率</Text>
                    </TouchableOpacity>
                </View>

                <View style={styles.circleView}>
                    <CirclePercentage size={113} strokeWidth={20} segments={segments} />
                    <View>
                        {
                            (circleData || []).map((item,index)=>{
                                if(((props.showType == 2 && item?.recorded) || props.showType == 1) || selectIndex == 2){
                                    return (
                                        <View style={styles.circleListView} key={'circlePer_'+index}>
                                            <View style={[styles.circleDot,{backgroundColor: selectIndex === 1 ? colors[index % colors.length] : moodsColors[item?.type || '0']}]}></View>
                                            <Text style={styles.circleName}>{selectIndex === 1 ? item?.name : moodsConfig[item?.type]} </Text>
                                            <Text style={styles.circlePer}> {selectIndex == 1 ? ( props.showType == 2 ? parseInt(String((item?.percent || 0) * 100)) : parseInt(String((item?.percentBaseTotalTime || 0) * 100))) : parseInt(String((item?.percent || 0) * 100))}% {selectIndex == 2 ? `${item?.time || 0}h` : ''}</Text>
                                        </View>
                                    )
                                }
                                
                            })
                        }
                    </View>
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    percentView: {
        backgroundColor: '#fff',
        borderRadius: 16,
        marginBottom: 16,
        paddingTop: 8,
        paddingBottom: 16
    },
    parentView: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderBottomWidth: 1,
        borderBottomColor: 'rgba(232, 232, 232, 1)',
        paddingHorizontal: 16,
        paddingBottom: 8,
    },
    parentsTitle: {
        color: 'rgba(0, 0, 0, 1)',
        fontSize: 16,
        fontWeight: 'bold',
        maxWidth: windowWidth - 32 - 100 -40,
    },
    parentToUpView: {
        paddingHorizontal: 10,
        height: 40,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 12,
        backgroundColor: 'rgba(245, 245, 245, 1)'
    },
    parentToUpText: {
        color: 'rgba(72, 72, 74, 1)',
        fontSize: 14,
    },
    percentBottomView: {
        paddingHorizontal: 16,
        marginTop: 10
    },
    percentTypeView: {
        backgroundColor: 'rgba(232, 232, 232, 1)',
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 12,
        height: 36,
        borderRadius: 12,
        paddingHorizontal: 2,
        justifyContent: 'space-between',
        width: '50%',
    },
    percentItemView: {
        width: '48%',
        height: 32,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 10,
        backgroundColor: 'rgba(232, 232, 232, 1)'
    },
    circleTypeText: {
        color: 'rgba(44, 44, 46, 1)',
        fontSize: 12
    },
    circleView: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around',
    },
    circleListView: {
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 6
    },
    circleDot: {
        width: 8,
        height: 8,
        borderRadius: 4,
        marginRight: 5,
    },
    circleName: {
        color: 'rgba(72, 72, 74, 1)',
        fontSize: 12,
        width: 80,
        fontFamily:'HarmonyOS Sans SC',
        lineHeight:18
    },
    circlePer: {
        color: 'rgba(142, 142, 147, 1)',
        fontSize: 12,
        fontFamily:'HarmonyOS Sans SC',
        lineHeight:18
    }
});
